<template>
  <div class="Catalog">
    <div class="Catalog_box">
      <div class="Catalog_box_title">
        <div>全部评论 <span>{{type.length}}</span></div>
        <div @click="Catalog_box_close"><img
            src="https://o6wndwjxn.qnssl.com/close.png"
            alt=""
          ></div>
      </div>
      <div class="Catalog_box_item">
        <div
          class="Catalog_bib"
          v-for="(item,index) in type"
          :key="index"
        >
          <div><img
              :src="item.cover"
              alt=""
            ></div>
          <div>
            <div class="Catalog_bib_name">{{item.nick_name}}</div>
            <div class="Catalog_bib_cont">{{item.content}}</div>
            <div
              class="Catalog_bib_teac"
              v-if="item.lecturer_content"
            >{{item.name}}:<span> {{item.lecturer_content}}</span></div>
            <div class="Catalog_bib_time">{{item.create_time}}</div>
          </div>
        </div>
      </div>
      <div class="Catalog_box_input">
        <div><input
            ref="inputp"
            type="text"
            @focus="Catalog_input_focus"
            placeholder="请输入评论内容"
            @blur='Catalog_input_blur'
            v-model="Catalog_input"
          ></div>
        <div
          v-show="Catalog_input_sub"
          @click="Catalog_submit"
        >发送</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
var timerId = null
export default {
  computed: {
    ...mapState({
      bts: state => state.bts
    })
  },
  watch: {
    bts (a) {
      if (a === true) {
      }
    }
  },
  props: {
    type: {}
  },
  data () {
    return {
      Catalog_input_sub: false,
      Catalog_input: ''
    }
  },
  created () {
  },
  methods: {
    Catalog_input_focus () {
      let cnt = 0
      setInterval(() => {
        if (cnt < 3) {
          cnt++
        } else {
          clearInterval(timerId)
          timerId = null
          return
        }
        document.body.scrollTop = document.body.scrollHeight
      }, 300)

      // if (window.__wxjs_is_wkwebview == true) {
      //   this.$nextTick(() => {
      //     document.getElementsByClassName('Catalog_box')[0].style.bottom = 65 + 'px'
      //   })
      // }
      this.Catalog_input_sub = true
    },
    Catalog_input_blur () {
      window.scrollTo(0, 0)
      if (timerId) {
        clearInterval(timerId)
        timerId = null
      }

      // if (window.__wxjs_is_wkwebview == true) {
      //   this.$nextTick(() => {
      //     document.getElementsByClassName('Catalog_box')[0].style.bottom = 0 + 'px'
      //   })
      // }
      // this.Catalog_input_sub = false
    },
    Catalog_box_close () {
      this.$emit('CatalogClose')
      this.$store.commit('evaluate', false)
    },
    Catalog_submit () {
      let scrollBox = document.getElementsByClassName('Catalog_box_item')[0]
      if (this.Catalog_input == '') return
      this.$emit('CatalogInput', this.Catalog_input)
      scrollBox.scrollTop = 0
      this.Catalog_input = ''
    }
  }
}
</script>

<style>
.Catalog_box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 60vh;
  background: white;
  border-radius: 10px 10px 0 0;
}

.Catalog_box_title {
  height: 55px;
  line-height: 55px;
  font-size: 18px;
  color: #1a1a1a;
  font-weight: bold;
  text-indent: 20px;
  display: flex;
}

.Catalog_box_title > div:nth-child(1) {
  flex: 1;
}

.Catalog_box_title > div:nth-child(1) span {
  color: #DA4131;
  display: inline-block;
  text-indent: 10px;
}

.Catalog_box_title > div:nth-child(2) {
  width: 75px;
  position: relative;
}

.Catalog_box_title > div:nth-child(2) img {
  position: absolute;
  right: 20px;
  top: 20px;
  height: 10px;
}

.Catalog_box_item {
  width: 100vw;
  height: calc(60vh - 110px);
  overflow: scroll;
  /* padding-bottom: 55px; */
  -webkit-overflow-scrolling: touch;
}

.Catalog_box_input {
  width: 100vw;
  height: 55px;
  border-top: #f4f4f4 1px solid;
  display: flex;
  line-height: 55px;
  text-align: center;
}

.Catalog_box_input > div:nth-child(1) {
  position: relative;
  flex: 1;
}

.Catalog_box_input > div:nth-child(1) input {
  position: absolute;
  left: 20px;
  top: 10px;
  width: calc(100% - 40px);
  height: 34px;
  line-height: 34px;
  font-size: 12px;
  outline: none;
  border: none;
  background: #f7f7f7;
  /* background: yellow; */
  border-radius: 500px;
  text-indent: 15px;
}

.Catalog_box_input > div:nth-child(2) {
  width: 70px;
  font-size: 15px;
  text-indent: -15px;
}

.Catalog_bib {
  width: 90%;
  margin: 0 5%;
  display: flex;
  word-wrap: break-word;
}

.Catalog_bib > div:nth-child(1) {
  width: 50px;
}

.Catalog_bib > div:nth-child(1) img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  border-radius: 50%;
}

.Catalog_bib > div:nth-child(2) {
  flex: 1;
  padding-left: 15px;
}

.Catalog_bib_name {
  margin-top: 24px;
  font-size: 14px;
  color: #666666;
}

.Catalog_bib_cont {
  margin-top: 12px;
  width: calc(100vw * 0.72);
  font-size: 16px;
  color: #1a1a1a;
  word-wrap: break-word;
}

.Catalog_bib_time {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #999999;
}

.Catalog_bib_teac {
  background: #f7f7f7;
  padding: 13px 15px;
  font-size: 14px;
  color: #f29911;
  margin-top: 15px;
}

.Catalog_bib_teac > span {
  color: #1a1a1a;
}
</style>
